<template>
  <u-popup :show="value" @close="close" round="10" mode="center" closeable>
    <view
      :class="[
        'editPassword',
        current == 0 ? 'taba' : '',
        current == 1 ? 'tabb' : ''
      ]"
    >
      <view class="title">
        <view class="left-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content">修改密码</view>
        <view class="right-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <u-tabs
        center="true"
        class="tabs"
        :list="tabsList"
        :lineWidth="current ? '70' : '60'"
        lineColor="#3E73FE"
        :activeStyle="{
          color: '#3E73FE',
          fontSize: '26rpx',
          transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
          color: '#333333',
          fontSize: '26rpx',
          transform: 'scale(1)'
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
        @change="tabsChange"
        :current="current"
      >
      </u-tabs>
      <view class="password" v-if="current == 0">
        <view class="line">
          <view class="label">原密码</view>
          <view class="input">
            <u--input
              placeholder="请输入原密码"
              border="surround"
              v-model="form.old_password"
              :customStyle="{
                height: '100%',
                borderColor: '#7b7b7b !important'
              }"
            ></u--input>
          </view>
        </view>
        <view class="line">
          <view class="label">新密码</view>
          <view class="input">
            <u--input
              placeholder="请输入新密码"
              border="surround"
              v-model="form.new_password"
              :customStyle="{
                height: '100%',
                borderColor: '#7b7b7b !important'
              }"
            ></u--input>
          </view>
        </view>
        <view class="line">
          <view class="label">确认密码</view>
          <view class="input">
            <u--input
              placeholder="确认新密码"
              border="surround"
              v-model="form.confirm_password"
              :customStyle="{
                height: '100%',
                borderColor: '#7b7b7b !important'
              }"
            ></u--input>
          </view>
        </view>
        <view class="tips">
          原密码默认为:123456
        </view>
        <view class="btn" @click="editClick">
          修改
        </view>
      </view>
      <view
        class="authcode"
        :style="{ height: !xx ? '243rpx' : '' }"
        v-if="current == 1"
      >
        <view class="newpassword" v-if="xx">
          <view class="line">
            <view class="label">新密码</view>
            <view class="input">
              <u--input
                placeholder="请输入新密码"
                border="surround"
                v-model="formA.new_password"
                :customStyle="{
                  height: '100%',
                  borderColor: '#7b7b7b !important'
                }"
              ></u--input>
            </view>
          </view>
          <view class="line">
            <view class="label">确认密码</view>
            <view class="input">
              <u--input
                placeholder="请输入新密码"
                border="surround"
                v-model="formA.confirm_password"
                :customStyle="{
                  height: '100%',
                  borderColor: '#7b7b7b !important'
                }"
              ></u--input>
            </view>
          </view>
          <view class="btn" @click="sendCodeEvent">发送验证码</view>
        </view>
        <view class="yzm" v-else>
          <view class="code">
            <u-code-input
              v-model="formA.code"
              :maxlength="6"
              hairline
              mode="line"
              @finish="finishDone"
            ></u-code-input>
          </view>
          <view class="resetSend">
            请输入验证码,未收到？<i class="send" @click="send">{{
              countDown ? countDown : '点击重发'
            }}</i></view
          >
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
    <u-code
      unique-key="page-d"
      :seconds="seconds"
      @end="end"
      @start="start"
      ref="uCode"
      @change="codeChange"
      :keepRunning="true"
    ></u-code>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    mobile: {
      type: String,
      default: false
    }
  },
  data () {
    return {
      seconds: 60,
      current: 0,
      countDown: '',
      tabsList: [
        {
          name: '原密码修改'
        },
        {
          name: '短信验证码修改'
        }
      ],
      form: {
        old_password: '',
        new_password: '',
        confirm_password: ''
      },
      formA: {
        code: '',
        new_password: '',
        confirm_password: ''
      },
      xx: true
    }
  },
  methods: {
    close () {
      this.form = {
        old_password: '',
        new_password: '',
        confirm_password: ''
      }
      this.formA = {
        code: '',
        new_password: '',
        confirm_password: ''
      }
      this.xx = true
      this.current = 0
      this.$emit('input', false)
    },
    tabsChange (v) {
      this.current = v.index
      if (this.current == 0) {
        this.formA = {}
      } else if (this.current == 1) {
        this.form = {}
      }
    },
    async sendCodeEvent () {
      if (!this.formA.new_password) {
        uni.$u.toast('请填写新密码')
        return
      }
      if (!this.formA.confirm_password) {
        uni.$u.toast('请确认新密码')
        return
      }
      if (this.formA.new_password !== this.formA.confirm_password) {
        uni.$u.toast('您的密码不相同!')
        return
      }
      try {
        const res = await this.$api.common.sendCode({
          code_type: 3,
          mobile: this.mobile
        })
        this.$refs.uCode.start()
        this.xx = false
      } catch (error) {
        uni.$u.toast(error.msg)
      }
    },
    async send () {
      if (!this.countDown) {
        const res = await this.$api.common.sendCode({
          code_type: 3,
          mobile: this.mobile
        })
        this.$refs.uCode.start()
      }
    },
    codeChange (v) {
      this.countDown = isNaN(+v.split('秒')[0]) ? 0 : +v.split('秒')[0]
    },
    start () {
      console.log('倒计时开始')
    },
    end () {
      console.log('倒计时结束')
    },
    async editClick () {
      if (
        !this.form.old_password ||
        !this.form.new_password ||
        !this.form.confirm_password
      ) {
        this.$refs.uToast.show({
          type: 'default',
          message: '请填写数据完整'
        })
        return
      }
      let msg
      if (this.form.old_password === this.form.new_password) {
        msg = '老密码和新密码相同'
        this.$refs.uToast.show({
          type: 'default',
          message: msg
        })
        return
      } else if (this.form.new_password !== this.form.confirm_password) {
        msg = '两次密码不一致'
        this.$refs.uToast.show({
          type: 'default',
          message: msg
        })
        return
      }
      try {
        const res = await this.$api.my.EditPassword({
          ...this.form
        })
        this.$refs.uToast.show({
          type: 'default',
          message: '修改成功!',
          complete: () => {
            this.close()
          }
        })
      } catch (error) {
        this.$refs.uToast.show({
          type: 'default',
          message: '老密码错误'
        })
        this.form.old_password = ''
      }
    },
    async finishDone () {
      try {
        const res = await this.$api.my.EditPasswordBycode(this.formA)
        uni.$u.toast('修改成功!')
        this.close()
      } catch (error) {
        uni.$u.toast(error.msg)
        this.formA.code = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.taba {
  min-width: 600rpx;
  min-height: 750rpx;
  position: relative;
}

.tabb {
  min-width: 600rpx;
  min-height: 430rpx;
}
.editPassword {
  padding-top: 60rpx;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35rpx;
    .left-icon {
      width: 30rpx;
      height: 30rpx;
    }
    .content {
      color: #333333;
      font-weight: 600;
      font-size: 34rpx;
      margin: 0 13rpx;
      letter-spacing: 4rpx;
    }
    .right-icon {
      width: 30rpx;
      height: 30rpx;
      transform: rotateY(180deg);
    }
  }
  .password {
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    .line {
      margin-bottom: 32rpx;
      display: flex;

      .label {
        display: flex;
        align-items: center;
        width: 171rpx;
        &::after {
          content: '*';
          color: red;
          margin-left: 15rpx;
        }
      }
      .input {
        width: 350rpx;
        height: 64rpx;
        // border: 1px solid #000;
      }
    }
    .tips {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
    }
    .btn {
      width: 100%;
      height: 88rpx;
      background-color: #3e73fe;
      font-size: 31rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 88rpx;
      color: #fff;
    }
  }
  .authcode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20rpx 50rpx 0 50rpx;
    height: 380rpx;
    .newpassword {
      .line {
        margin-bottom: 32rpx;
        display: flex;

        .label {
          font-size: 23rpx;
          display: flex;
          align-items: center;
          width: 140rpx;
          &::after {
            content: '*';
            color: red;
            margin-left: 15rpx;
          }
        }
        .input {
          width: 350rpx;
          height: 64rpx;
          // border: 1px solid #000;
        }
      }
      .btn {
        width: 100%;
        height: 88rpx;
        background-color: #3e73fe;
        font-size: 31rpx;
        text-align: center;
        line-height: 88rpx;
        border-radius: 88rpx;
        color: #fff;
      }
    }
    .yzm {
      .code {
        width: 100%;
        margin-bottom: 20rpx;
      }
      .resetSend {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 18rpx;
        width: 100%;
        color: #999999;
        letter-spacing: 4rpx;
        .send {
          color: #3e73fe;
        }
      }
    }
  }
}
</style>
